<script lang="ts" setup>
import { onDeactivated, onMounted, ref } from 'vue'
import { DataItem } from '@/modules/service'
import TheContainer from '@/components/TheContainer.vue'
import send from '../assets/发送 .png'
import sendFlower from '../assets/发送装饰.png'
import viewFlower from '../assets/查看装饰.png'
import music1 from '../assets/music1.mp3'
import music2 from '../assets/music2.mp3'
import music3 from '../assets/music3.mp3'
import music4 from '../assets/music4.mp3'
//获取实时留言数，在下面定时函数中调用
const total = ref()
const isPc = window.config.isPc

async function getTotal() {
  const res = await DataItem.count()
  total.value = res.data
}

//获取一百条留言
const seed = Date.now() % 10007
const commentsList: any = ref([])//最终含有100条留言的List
async function getRandomGetComments(page: number) {
  const searchInfo = {seed, page: page}
  const res = await DataItem.randomGetComments(searchInfo)
  for (const re of res.data.list) {
    let shortShow = re.text //花灯上展示的内容，超出显示小数点
    let pcShortShow = re.text //花灯上展示的内容，超出显示小数点
    if (re.text.length > 3) {
      shortShow = re.text.slice(0, 3) + '...'
    }
    if (re.text.length > 10) {
      pcShortShow = re.text.slice(0, 10) + '...'
    }
    Object.assign(re, {shortShow, pcShortShow})
  }
  commentsList.value = [...res.data.list, ...commentsList.value]
}

//循环获取到一百条
async function getComments() {
  for (let i = 0; i < 5; i++) {
    await getRandomGetComments(i)
  }
}

getComments()

const arr: number[] = []

function getRandomInt(max: any) {
  if (arr.length === 0) {
    for (let i = 0; i < max; i++) {
      arr.push(i)
    }
  }
  let randomIndex = Math.floor(Math.random() * arr.length)
  return arr.splice(randomIndex, 1)
}


//定时一条一条插入到items中
const items: any = ref([])
const timer = ref(0)
const index = ref(0)
const countControl = ref(0)
onMounted(() => { //组件挂载时的生命周期执行的方法
  timer.value = window.setInterval(function logname() {
    // 定时执行的方法（获取总数，插入数据）
    if (countControl.value % 4 === 0) {
      getTotal()
    }
    countControl.value++
    if (commentsList.value.length !== 0) {
      items.value.push({
        shortShow: commentsList.value[index.value % 100].shortShow,
        pcShortShow: commentsList.value[index.value % 100].pcShortShow,
        allShow: commentsList.value[index.value % 100].text,
        showRow: getRandomInt(4)
      })
      index.value++
    }
  }, 600)
})

onDeactivated(() => { //离开当前组件的生命周期执行的方法
  window.clearInterval(timer.value)
})


//点击查看祝福
const showDialog = ref(false)
const allShow = ref('')

function showContextDialog(index: number) {
  showDialog.value = true
  allShow.value = items.value[index % 100].allShow
}

//打开发送祝福对话框
const reviewDialog = ref(false)
const reviewContent = ref('')

function showReviewDiaglog() {
  reviewDialog.value = true
}

//发送祝福
async function sendContext() {
  const res = await DataItem.addComments(reviewContent.value)
  let shortShow = reviewContent.value
  let pcShortShow = reviewContent.value
  if (reviewContent.value.length > 3) {
    shortShow = reviewContent.value.slice(0, 3) + '...'
  }
  if (reviewContent.value.length > 10) {
    pcShortShow = reviewContent.value.slice(0, 10) + '...'
  }
  items.value = []
  items.value.push({
    shortShow,
    pcShortShow,
    allShow: reviewContent.value,
    showRow: getRandomInt(4),
    mySend: {fontWeight: 600, color: 'yellow'}
  })
  reviewDialog.value = false
  reviewContent.value = ''
}

//切换歌曲
const changeDialog = ref(false)
const musicSrc = ref(music1)
const selectMusic = ref({value: 'music1'})

function showMusicDiaglog() {
  changeDialog.value = true
}

const columns = [
  {text: '音乐1', value: 'music1'},
  {text: '音乐2', value: 'music2'},
  {text: '音乐3', value: 'music3'},
  {text: '音乐4', value: 'music4'},
]
const musicAudio: any = ref(null)
const playState: any = ref(false)

function onMusicConfirm(a: any) {
  musicAudio.value.pause()
  if (a.value === 'music1') musicSrc.value = music1
  else if (a.value === 'music2') musicSrc.value = music2
  else if (a.value === 'music3') musicSrc.value = music3
  else if (a.value === 'music4') {
    musicSrc.value = music4
  }
  musicAudio.value.load()
  musicAudio.value.play()
  playState.value = true
  changeDialog.value = false
}

function onMusicCancel() {
  if (playState.value) {
    musicAudio.value.pause()
  } else {
    musicAudio.value.play()
  }
  playState.value = !playState.value
  changeDialog.value = false
}


</script>

<template>
  <!--  <div class="mainTitle">-->
  <!--    <van-button>切换歌曲</van-button>-->
  <!--    <span style="color: white;width: 160px;display: flex;justify-content: center">实时留言数：{{ total }}</span>-->
  <!--    <van-button @click="showReviewDiaglog">写祝福</van-button>-->
  <!--  </div>-->
  <!--  </div>-->
  <TheContainer :total="total" @changeMusic="showMusicDiaglog" @sendContext="showReviewDiaglog">
    <el-row v-for="(item,index) in items" :key="index">
      <el-col :span="6" style="position: relative;display: flex;align-items: center;justify-content: center">
        <Transition :name="isPc?'ant-light':'light'" appear>
          <div v-if="Number(item.showRow)===0" :class="isPc?'ant-light':'light'" @click="showContextDialog(index)">
            <div v-if="isPc" :style="item.mySend" class="ant-lightText">{{ item.pcShortShow }}</div>
            <div v-else :style="item.mySend" class="lightText">{{ item.shortShow }}</div>
          </div>
        </Transition>
      </el-col>
      <el-col :span="6" style="position: relative;display: flex;align-items: center;justify-content: center">
        <Transition :name="isPc?'ant-light':'light'" appear>
          <div v-if="Number(item.showRow)===1" :class="isPc?'ant-light':'light'" @click="showContextDialog(index)">
            <div v-if="isPc" :style="item.mySend" class="ant-lightText">{{ item.pcShortShow }}</div>
            <div v-else :style="item.mySend" class="lightText">{{ item.shortShow }}</div>
          </div>
        </Transition>
      </el-col>
      <el-col :span="6" style="position: relative;display: flex;align-items: center;justify-content: center">
        <Transition :name="isPc?'ant-light':'light'" appear>
          <div v-if="Number(item.showRow)===2" :class="isPc?'ant-light':'light'" @click="showContextDialog(index)">
            <div v-if="isPc" :style="item.mySend" class="ant-lightText">{{ item.pcShortShow }}</div>
            <div v-else :style="item.mySend" class="lightText">{{ item.shortShow }}</div>
          </div>
        </Transition>
      </el-col>
      <el-col :span="6" style="position: relative;display: flex;align-items: center;justify-content: center">
        <Transition :name="isPc?'ant-light':'light'" appear>
          <div v-if="Number(item.showRow)===3" :class="isPc?'ant-light':'light'" @click="showContextDialog(index)">
            <div v-if="isPc" :style="item.mySend" class="ant-lightText">{{ item.pcShortShow }}</div>
            <div v-else :style="item.mySend" class="lightText">{{ item.shortShow }}</div>
          </div>
        </Transition>
      </el-col>
    </el-row>
    <van-popup v-if="!isPc"
               v-model:show="showDialog"
               position="bottom"
               style=" height: 150px;
               background-image: url('src/assets/查看祝福.png');
               background-size: 100% 100%;
               backgroundColor:rgba(100,100,100,1);
               background-color: rgba(0,0,0,0)">
      <img :src="viewFlower" style="position: absolute;top:8px;right: 8px;width: 100px;z-index: 2"/>
      <div class="content">
        <div class="title"> 祝福语</div>
        <div class="review">{{ allShow }}</div>
        <div style="display: flex;justify-content: space-around;align-items: center">
          <!--        <van-button round type="primary">点赞</van-button>-->
          <!--        <van-button round type="warning">举报</van-button>-->
        </div>
      </div>
    </van-popup>
    <a-modal v-else v-model:visible="showDialog" :footer="null" title="祝福语">
      <p>{{ allShow }}</p>
    </a-modal>
    <van-popup v-if="!isPc"
               v-model:show="reviewDialog"
               position="bottom"
               style="height: 300px;
               background-image: url('src/assets/发送祝福.png');
               background-size: 100% 100%;
               background-color: rgba(0,0,0,0)">
      <img :src="sendFlower" style="position: absolute;top:8px;right: 8px;width: 100px;z-index: 2"/>
      <div class="content">
        <div class="title"> 填写祝福</div>
        <div class="sendReview">
          <van-cell-group inset>
            <van-field v-model="reviewContent" style="height: 140px" type="textarea"/>
          </van-cell-group>
        </div>
        <div style="display: flex;justify-content: space-around;align-items: center;height: 60px">
          <img :src="send" style="width: 150px" @click="sendContext"/>
        </div>
      </div>
    </van-popup>
    <a-modal v-else v-model:visible="reviewDialog" cancelText="取消" okText="发送" title="填写祝福" @ok="sendContext">
      <a-textarea v-model:value="reviewContent" class="ant-sendReview"/>
    </a-modal>
    <van-popup v-if="!isPc" v-model:show="changeDialog" position="bottom"
               style="background-image: url('src/assets/发送祝福.png');background-size: 100% 100%;background-color: rgba(0,0,0,0)">
      <van-picker
        :columns="columns"
        :visible-item-count="3"
        cancel-button-text="播放/暂停"
        color:="black"
        style="margin: 8px;height: 200px;border-radius: 8px;background-color: rgba(0,0,0,0)"
        @cancel="onMusicCancel"
        @confirm="onMusicConfirm"
      />
    </van-popup>
    <a-modal v-else v-model:visible="changeDialog" title="切换歌曲" width="400px">
      <a-radio-group v-model:value="selectMusic.value">
        <a-radio style="margin: 8px" value="music1">音乐1</a-radio>
        <a-radio style="margin: 8px" value="music2">音乐2</a-radio>
        <a-radio style="margin: 8px" value="music3">音乐3</a-radio>
        <a-radio style="margin: 8px" value="music4">音乐4</a-radio>
      </a-radio-group>
      <template #footer>
        <a-button @click="onMusicCancel">播放/暂停</a-button>
        <a-button type="primary" @click="onMusicConfirm(selectMusic)">切换</a-button>
      </template>
    </a-modal>
    <audio
      ref="musicAudio"
      autoplay="autoplay"
      loop
      preload="auto"
      style="display: none;">
      <source :src="musicSrc" type="audio/mp3"/>
    </audio>
  </TheContainer>
</template>

<style scoped>

.ant-radio-group {
  display: flex;
  flex-direction: column;
}

.ant-light-enter-active,
.ant-light-leave-active {
  transition: transform 9s ease-out, opacity 2s ease-out;
}

.ant-light-enter-from,
.ant-light-leave-to {
  opacity: 0;
  transform: translateY(100vh);
}

.light-enter-active,
.light-leave-active {
  transition: transform 9s ease-out, opacity 2s ease-out;
}

.light-enter-from,
.light-leave-to {
  opacity: 0;
  transform: translateY(110vh);
}

.ant-light {
  width: 100%;
  height: 150px;
  background-image: url("src/assets/孔明灯.png");
  top: -230px;
  color: white;
  background-size: 80px;
  background-position: 50%;
  position: absolute;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.light {
  width: 80%;
  height: 75px;
  background-image: url("src/assets/孔明灯.png");
  top: -230px;
  color: white;
  background-size: 75px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 24px;
  color: white;
  font-weight: 600;
  padding: 16px;
}

.review {
  padding: 16px;
  font-size: 16px;
  color: white;
  font-weight: 300;
}

.mainTitle {
  padding: 16px;
  display: flex;
  justify-content: space-around;
  z-index: -10;
  background-color: black;
  align-items: center;
  opacity: 0.6;
}

.sendReview {
  padding-top: 16px;
  padding-bottom: 16px;
}

.reviewDialog {

}

:deep(.van-picker-column__item) {
  color: white;
}

:deep(.van-picker__mask) {
  background-image: unset;
}

:deep(.van-picker__confirm) {
  color: white;
}

:deep(.van-picker__cancel) {
  color: white;
}

.ant-sendReview {
  height: 100px;
}

:deep(.ant-modal-content) {
  background-image: url('src/assets/发送祝福.png');
  background-color: rgba(0, 0, 0, 0);
}

.ant-lightText {
  position: absolute;
  bottom: 16px;
  font-size: 16px;
}

.lightText {
  position: absolute;
  top: 16px;
}
</style>